<template>
  <a-card :bordered="false">

    <div class="table-operator">
      <a-button
        type="primary"
        icon="plus"
        size="small"
        v-action:mkdir:folder
        @click="mkdirFolder('')"
      >新建根目录</a-button>

      <a-button
        type="primary"
        icon="redo"
        size="small"
        @click="loadData(null)"
      >返回根目录</a-button>
    </div>

    <a-table
      ref="table"
      size="small"
      bordered
      rowKey="fileName"
      :columns="columns"
      :dataSource="data">
      <span slot="action" slot-scope="text, record">
        <template>
          <a-tag v-action:folder:delete v-if="record.fileName!=='返回上一级'" color="red" @click="handleDelete(record)" >删除</a-tag>
          <a-tag v-action:folder:down v-if="record.fileName!=='返回上一级'&& record.directory" color="orange" @click="downZip(record)" >压缩下载</a-tag>
          <a-tag v-action:folder:upload v-if="record.fileName!=='返回上一级'&& record.directory" color="green" @click="uploadFile(record)">上传文件</a-tag>
          <a-tag v-action:mkdir:folder v-if="record.fileName!=='返回上一级'&& record.directory" color="#f50" @click="mkdirFolder(record.relativePath)">创建子目录</a-tag>
        </template>
      </span>

      <span slot="fileName" slot-scope="text, record">
        <template>
          <a v-if="record.directory && record.fileName!=='返回上一级'" href="javascript:;" @click="loadChildFolder(record)"><a-icon type="folder" />  {{ text }}</a>
          <a v-if="!record.directory && record.fileName!=='返回上一级'" href="javascript:;" @click="loadFileContent(record)"><a-icon type="file" />  {{ text }}</a>
          <a v-if="record.fileName==='返回上一级'" @click="loadChildFolder(record)" href="javascript:;"> <a-icon type="enter" />  {{ text }}</a>
        </template>
      </span>

      <span slot="fileSize" slot-scope="val">
        <template>
          {{ parseInt(val/1024) }} KB
        </template>
      </span>

    </a-table>
    <upload-file ref="uploadFile" @ok="uploadOk"/>
    <mkdir-folder ref="mkdirFolder" @ok="mkdirOk"/>
    <edit-file ref="editFile"></edit-file>
  </a-card>
</template>

<script>
import moment from 'moment'
import { page, deleteFile, downZip } from '@/api/site/siteSource'
import uploadFile from './uploadFile'
import mkdirFolder from './mkdirFolder'
import editFile from './editFile'
export default {
  name: 'TableList',
  components: {
    mkdirFolder,
    editFile,
    uploadFile
    // handleCreateFile
  },
  props: {
    statusFilter: {
      type: Function,
      default: undefined
    }
  },
  data () {
    return {
      mdl: {},
      // 高级搜索 展开/关闭
      advanced: false,
      // 查询参数
      queryParam: {
       path: ''
      },
      data: [],
      // 表头
      columns: [
        {
          title: '文件名称',
          dataIndex: 'fileName',
          scopedSlots: { customRender: 'fileName' }
        },
        {
          title: '文件大小',
          dataIndex: 'size',
          scopedSlots: { customRender: 'fileSize' }
        },
        {
          title: '创建时间',
          dataIndex: 'creationTime',
          sorter: true,
          needTotal: false,
          customRender: text => {
            if (text) return moment(text).format('YYYY-MM-DD')
          }
        },
        {
          title: '修改时间',
          dataIndex: 'lastModifiedTime',
          sorter: true,
          needTotal: false,
          customRender: text => {
            if (text) return moment(text).format('YYYY-MM-DD')
          }
        },
        {
          title: '操作',
          dataIndex: 'action',
          width: '350px',
          scopedSlots: { customRender: 'action' }
        }
      ],
      optionAlertShow: false
    }
  },
  created () {
    this.loadData(null)
  },
  methods: {
    loadChildFolder (record) {
      this.loadData(record.relativePath)
    },
    loadFileContent (record) {
      const fileName = record.fileName
      const postfixs = ['.txt', '.html', '.conf', '.yml', '.xml', '.properties', '.css', '.js']
      const postfix = fileName.substring(fileName.lastIndexOf('.'), fileName.length)
      if (postfixs.indexOf(postfix) >= 0) {
         this.$refs.editFile.openDesign(record)
      }
    },
    // 加载数据方法 必须为 Promise 对象
    loadData (path) {
       page({ path: path || '' }).then(
        response => {
          this.data = response.res
        }
      )
    },
    handleDelete (record) {
      const that = this
      this.$confirm({
        title: '操作提醒',
        content: '将会删除所有文件确吗?',
        onOk () {
          deleteFile({ path: record.relativePath })
            .then(response => {
              if (response.code === 0) {
                that.$message.info('操作成功!')
                that.handleOk(record.relativePath.substring(0, record.relativePath.lastIndexOf('/')))
              } else {
               that.$message.error(response.msg)
              }
            })
            .catch(response => {
              that.$message.warn(response.data.msg)
            })
        },
        onCancel () {}
      })
    },
    mkdirOk (filePath) {
      if (!filePath) {
        this.loadData(null)
      }
    },
    uploadOk () {

    },
    downZip (record) {
    downZip({ path: record.relativePath }).then(response => {
      const blob = new Blob([response.data])
      const linkNode = document.createElement('a')
      linkNode.download = response.headers.filename // a标签的download属性规定下载文件的名称
      linkNode.style.display = 'none'
      linkNode.href = URL.createObjectURL(blob) // 生成一个Blob URL
      document.body.appendChild(linkNode)
      linkNode.click() // 模拟在按钮上的一次鼠标单击
      URL.revokeObjectURL(linkNode.href) // 释放URL 对象
      document.body.removeChild(linkNode)
    })
    },
    uploadFile (record) {
      this.$refs.uploadFile.open(record.relativePath)
    },
    mkdirFolder (path) {
      this.$refs.mkdirFolder.open(path)
    },
    handleOk (path) {
       this.loadData(path)
    }
  }
}
</script>
